<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Hail | {% block title %}{% endblock %}</title>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link rel="shortcut icon" href="{{ base_path }}/common_static/hail_logo_sq.ico" type="image/x-icon" />
  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700" rel="stylesheet" />
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
  <link rel="stylesheet"
    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" />
  {% if use_tailwind %}
  <link rel="stylesheet" type="text/css" href="{{ base_path }}/common_static/css/output.css" />
  <script defer src="{{ base_path }}/common_static/lib/alpinejs/cdn.min.js"></script>
  <style>
    [x-cloak] {
      display: none !important;
    }
  </style>
  {% else %}
  <link rel="stylesheet" type="text/css" href="{{ base_path }}/common_static/css/main.css" />
  {% endif %}
  {% block head %}{% endblock %}
</head>

<body>
  <div id="main" class="{{ 'py-4 px-4 md:px-8' if use_tailwind else '' }}">
    {% if use_tailwind %}
    {% include 'new_header.html' %}
    {% else %}
    {% include 'header.html' %}
    {% endif %}
    <div id="content">
      {% if message is defined %}
      <div id="message" class="message-{{ message['type'] }}">
        {{ message['text'] }}
      </div>
      {% endif %}
      {% block content %}{% endblock %}
    </div>
  </div>
</body>

</html>
